<template>
  <div class="selectConster">
    <div class="selectNavBar">
      <van-nav-bar title="选品库" left-arrow @click-left="goback">
        <template #right>
          <van-icon name="search" size="20" />
        </template>
      </van-nav-bar>
    </div>
    <div class="classify">
      <van-tree-select height="100hv" :items="items" :main-active-index.sync="active">
        <template #content>
          <shoppingGaps :shoppingGaps="shoppingGaps"></shoppingGaps>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>

<script>
import shoppingGaps from "../../components/shoppingGaps";
export default {
  name: "select",
  data() {
    return {
      active: 0,
      items: [
        { text: "玫瑰" },
        { text: "康乃馨" },
        { text: "百合" },
        { text: "洋桔梗" },
        { text: "菊类" },
        { text: "配草" },
        { text: "本木" },
        { text: "染色系" },
        { text: "进口花" }
      ],
      shoppingGaps: [
        {
          images: require("../../assets/images/zwt.png"),
          title: "满天星",
          topPrice: "￥21.1",
          buttomPrice: "￥14"
        },
        {
          images: require("../../assets/images/zwt.png"),
          title: "满天星",
          topPrice: "￥21.1",
          buttomPrice: "￥14"
        },
        {
          images: require("../../assets/images/zwt.png"),
          title: "满天星",
          topPrice: "￥21.1",
          buttomPrice: "￥14"
        }
      ]
    };
  },
  methods: {
    // 返回上一层
    goback() {
      this.$router.go(-1);
    }
  },
  components: {
    shoppingGaps
  }
};
</script>

<style scoped>
.van-sidebar {
  background-color: #fff;
}
.van-sidebar-item {
  margin-top: 15px;
  font-size: 15px;
  font-weight: bold;
  background-color: #fff;
  text-align: center;
}
.van-sidebar-item--select {
  font-size: 15px;
  font-weight: bold;
  color: #00c657;
}
.van-sidebar-item--select::before {
  background-color: #00c657;
  height: 50px;
  width: 3px;
}
</style>
